import Taro,{ Component } from '@tarojs/taro'
import { View , Image , Text} from '@tarojs/components'

import './exchangeItem.scss'

import location_icon from '../../image/ic_location.png'
import {base_url} from "../../network/config";
import DataManager from "../../utils/DataManager";

let isEnable = true;
let isReceiveEnable = true;

export default class shopItem extends Component {
  static options = {
    addGlobalClass: true
  }

  defaultProps = {
    scoreItem : {},
    canExchange: false,
    goodsTotalCount:0
  }

  constructor(){
    super(...arguments)
    this.state={
      totalCount : this.props.goodsTotalCount,
    }
  }

  onExchangeClick = (scoreItem) =>{
    if (this.state.totalCount <= 0){
      return;
    }

    let scoreInfo = JSON.stringify(scoreItem);
    Taro.navigateTo({
      url: `/pages/me/exchangeDetail?scoreInfo=` + scoreInfo
    })
  }

  onReceive = (scoreItem) =>{
    if (!isReceiveEnable){
      return;
    }
    isReceiveEnable = false;

    let _this = this;

    Taro.request({
      url:base_url + 'rest/user/receive/submitReceive',
      data:{
        token:DataManager.getToken(),
        platform:'android_c',
        weixinId:DataManager.getWeiXinId(),
        loginChannel:'wechat',
        appId:'KC876D98B30UA40CJSNHI689FB33SDW',
        digest : 'dda484557c12febe48139d8f44051c13',
        id:scoreItem.id,
      },
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      method: 'POST',
      success: (obj) => {
        if (obj.data.status == 'success') {
          Taro.showToast({
            title: '领取成功',
            icon: 'none',
            duration: 1000
          })
          Taro.eventCenter.trigger('onGoodReceive' ,[]);
        } else {
          Taro.showToast({
            title: obj.data.message,
            icon: 'none',
            duration: 1000
          })
        }
        isReceiveEnable = true;
      },
      fail: (obj) => {
        Taro.showToast({
          title: '程序异常',
          icon: 'none',
          duration: 1000
        })
        isReceiveEnable = true;
      }
    })
  }

  onCheckLocation = (scoreItem) =>{
    if (!scoreItem){
      return
    }
    const latitude =  scoreItem.latitude
    const longitude =  scoreItem.longitude
    console.log(scoreItem.longitude + ' ' + scoreItem.longitude)
    Taro.openLocation({
      latitude,
      longitude,
      scale: 18
    })
  }

  render() {
    let scoreItem = this.props.scoreData;
    let integral = '';
    let count = '';
    let time = '';
    if (scoreItem){
      integral = '所需积分：' + scoreItem.integral;
      count = '剩余件数：' + this.state.totalCount;
      time = '领取时间：' + scoreItem.startDate + '--' + scoreItem.endDate;
    }

    let exchangeStyle = scoreItem.integral > 0 ? 'background-color: #ff4a43;' : 'background-color: #f0f0f0;';

    return (
      <View className='score-item-container'>
        <View className='score-item-sub-container'>
          <View className='score-item-left-container'>
            <Image className='score-item-image' src={scoreItem.goodsImage}/>
            <View className='score-item-info-container'>
              <Text className='score-item-name'>{scoreItem.goodsName}</Text>
              <Text className='score-item-score'>{integral}</Text>
              {this.props.canExchange &&<Text className='score-item-count'>{count}</Text>}
            </View>
          </View>
          {this.props.canExchange &&
            <View className='score-item-exchange' style={exchangeStyle} onClick={this.onExchangeClick.bind(this , scoreItem)}>
              <Text className='score-item-exchange-text'>兑换</Text>
            </View>
          }
          {!this.props.canExchange && scoreItem.receiveStatus == 0 &&
          <View className='score-item-exchange' style={exchangeStyle} onClick={this.onReceive.bind(this , scoreItem)}>
            <Text className='score-item-exchange-text'>领取</Text>
          </View>
          }
        </View>
        {
          !this.props.canExchange && scoreItem.receiveStatus != 1 &&
          <Text className='score-item-count' style='margin-top:10px;margin-left:20px'>{time}</Text>
        }
        <View className='score-item-address-container' onClick={this.onCheckLocation.bind(this , scoreItem)}>
          <Image style='width:20px;height:20px' src={location_icon}/>
          <Text className='score-item-address'>{scoreItem.receiveAddress}</Text>
        </View>
        <View className='score-list-divider'></View>
      </View>
    )
  }

}

